Forms

<single-select id="singleselect1" value="2" />

var items = [{value: 1, text: 'Owner'}, {value: 2, text: 'Admin'}, {value: 3, text: 'User'}];
var singleselect = riot.mount('single-select', {items: items})[0];
singleselect.on('change', function (val) {
  console.log('singleselect:change', val);
});

<single-select id="singleselect2" value="2" disabled="true" />

var items = [{value: 1, text: 'Owner'}, {value: 2, text: 'Admin'}, {value: 3, text: 'User'}];
var singleselect2 = riot.mount('#singleselect2', {items: items})[0];

<single-select id="singleselect3" value="dog" />

var animals = [
  {class: 'mammal', value: "dog", name: "Dog" },
  {class: 'mammal', value: "cat", name: "Cat" },
  {class: 'mammal', value: "horse", name: "Horse" },
  {class: 'mammal', value: "kangaroo", name: "Kangaroo" },
  {class: 'bird', value: 'duck', name: 'Duck'},
  {class: 'bird', value: 'chicken', name: 'Chicken'},
  {class: 'bird', value: 'ostrich', name: 'Ostrich'},
  {class: 'bird', value: 'seagull', name: 'Seagull'},
  {class: 'reptile', value: 'snake', name: 'Snake'},
  {class: 'reptile', value: 'lizard', name: 'Lizard'},
  {class: 'reptile', value: 'alligator', name: 'Alligator'},
  {class: 'reptile', value: 'turtle', name: 'Turtle'}
];

var optgroups = [
  {value: 'mammal', label: 'Mammal'},
  {value: 'bird', label: 'Bird'},
  {value: 'reptile', label: 'Reptile'}
];
var singleselect3 = riot.mount('#singleselect3', {
  items: animals, 
  labelField: 'name', 
  optgroupField: 'class', 
  optgroups: optgroups
})[0];

<multi-select />

var items = [{value: 1, text: 'Owner'}, {value: 2, text: 'Admin'}, {value: 3, text: 'User'}];
var multiselect = riot.mount('multi-select', {value: [1,2], items: items})[0];
multiselect.on('change', function (val) {
  console.log('multiselect:change', val);
});